<!-- 私信页面 -->
<template>
  <transition mode="out-in" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
    <div id="privateLetterPage">
      <!-- 头部菜单栏 -->
      <HomeHead :selectBtn="selectBtn"></HomeHead>
      <!-- 内容区域 -->
      <div class="content_box_out">
        <div class="content_box">
          <!-- 左边消息内容区域 -->
          <div class="left_msg_content">
            <!-- 左边消息头部 -->
            <div class="left_msg_head">
              <!-- 最近联系 文字 -->
              <div class="text">最近联系</div>
              <!-- 写私信按钮 -->
              <div class="write_btn">
                <!-- Form -->
                <el-button type="text" @click="dialogFormVisible = true">写私信</el-button>
                <el-dialog title="发送私信" :visible.sync="dialogFormVisible">
                  <el-form :model="form">
                    <el-form-item label="发给:" :label-width="formLabelWidth">
                      <el-autocomplete
                        v-model="toformid"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入内容"
                        @select="handleSelect"
                      ></el-autocomplete>
                    </el-form-item>
                    <el-form-item label="内容:" :label-width="formLabelWidth">
                      <el-input v-model="inputContent" autocomplete="off" placeholder=""></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                  </div>
                </el-dialog>
              </div>
            </div>
            <!-- 左边消息列表 -->
            <LetterList v-for="(i, index) of testList" :key="index" :list="i"></LetterList>
          </div>
          <!-- 右边设置区域 -->
          <div class="right_msg_set">
            <!--Tips小框-->
            <div class="set_box">
              <Row>
                <Col span="11">
                  <Card>
                    <p slot="title">Tips</p>
                    <p>担心骚扰？可以 设置 为「开启陌生人私信箱」。</p>
                  </Card>
                </Col>
              </Row>
            </div>
          </div>
          <!-- 尾部 -->
          <LetterFooter></LetterFooter>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import HomeHead from '../components/HomeHead'
  import LetterList from './LetterPage/LetterList'
  import LetterFooter from './LetterPage/LetterFooter'
  export default {
    name: 'privateLetterPage',
    components: {
      'HomeHead': HomeHead,
      'LetterList': LetterList,
      'LetterFooter': LetterFooter
    },
    data () {
      return {
        selectBtn: 0,
        modal1: false,
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          content: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '50px',
        state: '',
        timeout: null,
        testList: [],
        inputContent: '',
        toformid: '',
        restaurants: [
          {'value': '知乎小管家'},
          {'value': '大知'},
          {'value': 'xushulong'},
          {'value': 'abc'},
          {'value': '王大二'}
        ]
      }
    },
    computed: {
    },
    methods: {
      open () {
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '发送成功! '
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      querySearchAsync (queryString, cb) {
        var restaurants = this.restaurants
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          cb(results)
        }, 3000 * Math.random())
      },
      createStateFilter (queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSelect (item) {
        console.log(item)
      },
      add () {
        this.dialogFormVisible = false
        // this.$Message.info(this.uid)
        if (this.inputContent.length === 0) {
          this.$Message.error('回复不可为空!')
        } else if (this.toformid.length === 0) {
          this.$Message.error('接收人不可为空!')
        } else {
          alert(this.inputContent)
          this.axios.get('/api/addLetter', {
            params: {
              phone: sessionStorage.getItem('phone'),
              fromid: 3,
              content: this.inputContent
            }
          }).then((response) => {
            if (response.data.code === 200) {
              this.$Message.success('发送成功')
              this.getLetterData()
              // this.list.push(this.list)
            } else {
              this.$Message.error('发送失败')
            }
          })
            .catch((error) => {
              this.$Notice.error({
                title: '通知',
                desc: '接口，异常！'
              })
              console.info(error)
            })
        }
      },
      getLetterData () {
        this.axios.get('/api/findNearLetter', {
          params: {
            phone: sessionStorage.getItem('phone')
          }
        })
          .then(res => {
            this.testList = res.data.data
          })
      }
    },
    created () {
      this.getLetterData()
    },
    mounted () {
    }
  }
</script>

<style scoped>
  @import '../../../../static/css/letter/LetterPage.css';
</style>
